<template>
  <div class="qq">
    <div class="contain">
      <qqSearch></qqSearch>
      <van-swipe :autoplay="5000" indicator-color="white" class="qqSwipe">
        <van-swipe-item><img src="http://i0.hdslb.com/bfs/article/4af676b3f56f5458ffec998e06a4e618a43775fa.jpg" alt="">
        </van-swipe-item>
        <van-swipe-item><img src="http://b-ssl.duitang.com/uploads/item/201505/09/20150509195740_SzQ4K.jpeg" alt="">
        </van-swipe-item>
        <van-swipe-item><img src="http://pic1.win4000.com/wallpaper/2019-11-07/5dc3773758433.jpg" alt="">
        </van-swipe-item>
        <van-swipe-item><img src="http://b-ssl.duitang.com/uploads/item/201806/11/20180611150129_bfgps.thumb.700_0.jpg"
                             alt=""></van-swipe-item>
      </van-swipe>
      <div class="qqChannel">
        <p>频道推荐</p>
        <div class="content">
          <router-link :to="{name:'公共频道',query:{id:0}}" class="left">
            <div class="l"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1575095845504&di=ea3edc6023aba6858e63f425db9c6ba2&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201505%2F15%2F20150515204736_mVNuh.jpeg" alt=""></div>
            <div class="r">
              <p class="first">公共频道</p>
              <p class="second">大众喜欢的音乐</p>
            </div>
          </router-link>
          <router-link  :to="{name:'音乐人频道',query:{id:1}}" class="right">
            <div class="l"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1575095845504&di=ea3edc6023aba6858e63f425db9c6ba2&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201505%2F15%2F20150515204736_mVNuh.jpeg" alt=""></div>
            <div class="r">
              <p class="first">音乐人频道</p>
              <p class="second">音乐人聚集地</p>
            </div>
          </router-link>
        </div>
      </div>
      <router-view />
    </div>
    <div class="qqHomeFooter">祝您开心</div>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        active: 0,
      }
    },
    created () {}
  }
</script>

<style lang="less">
  .qq {
    background: #f9f9f9;

    .contain {
      width: 95%;
      margin: 0 auto;
      padding-top: 2rem;
    }
  }

  .qqSwipe {
    height: 15rem;

    img {
      display: inline-block;
      width: 100%;
      height: 100%;
      border-radius: 2rem;
    }
  }

  .qqChannel {
    padding-top: 2rem;
    font-size: 1.6rem;
    font-weight: 600;
    .content{
      width: 100%;
      height: 7rem;
      .left{
        float: left;
        width: 48%;
        height: 100%;
        background-color: #31c27c;
        border-radius: 1rem;
        .l{
          float: left;
          width: 38%;
          padding: 1rem 1rem;
          img{
            display: block;
            width: 5rem;
            height: 5rem;
            border-radius: 10%;
          }
        }
        .r{
          /*display: inline-block;*/
          padding-top: 1rem;
          .first{
            color: #fff;
            font-size: 1.5rem;
          }
          .second{
            font-size: 1.2rem;
            color: #fff;
          }
        }
      }
      .right{
        float: right;
        width: 48%;
        height: 100%;
        background-color: #fcc33c;
        border-radius: 1rem;
        .l{
          float: left;
          width: 38%;
          padding: 1rem 1rem;
          img{
            display: block;
            width: 5rem;
            height: 5rem;
            border-radius: 10%;
          }
        }
        .r{
          /*display: inline-block;*/
          padding-top: 1rem;
          .first{
            color: #fff;
            font-size: 1.5rem;
          }
          .second{
            font-size: 1.2rem;
            color: #fff;
          }
        }
      }

    }
  }

  .qqHomeFooter{
    padding-top: 10rem;
    font-size: 8rem;
    text-align: center;
    padding-bottom: 14rem;
  }


</style>
